<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>找回密码 - ${site.name}</title>
  <link href="/${res}/css/login-register.css" rel="stylesheet">

  <link href="/${res}/style.css" rel="stylesheet">
  <link href="/${res}/css/color.css" rel="stylesheet">
  <link href="/${res}/css/responsive.css" rel="stylesheet">
  <!-- <link href="/${res}/css/login-register.css" rel="stylesheet">-->
  <script src="${resSys}/jquery.js" type="text/javascript"></script>
  <script src="${resSys}/front.js" type="text/javascript"></script>
  <script type="text/javascript" src="${resSys}/TimerButton.js"></script>
  <script src="${resSys}/common.js"></script>
  <script src="${resSys}/Popt.js"></script>
  <script src="${resSys}/citySet.js"></script>
  <!--[if lt IE 9]>
  <script src="/${res}/js/html5shiv.min.js"></script>
  <script src="/${res}/js/respond.min.js"></script>
  <![endif]-->
<!--<style type="text/css">-->
    <!--.sm_button{-->
        <!--background-color: #f94d4d;-->
        <!--cursor: pointer;-->
        <!--color: #fff;-->
        <!--font-size: 16px;-->
        <!--line-height: 36px;-->
        <!--height: 36px;-->
        <!-- -webkit-border-radius: 5px;-->
    <!--}-->
<!--</style>-->
<script type="text/javascript">
$(function() {
	$("#jvForm").validate();
	$("#getSmCode1").attr("disabled", true);
});

function validatePhone(obj) {
    $.ajax({
        url: "${base}/phone_exists.jspx",
        type: "POST",
        dataType:"json",
        data: {username : $(obj).val()},
        success: function (data) {
            $("#username").parent().find("label").remove();
            if(!data.flag){
                var str = $("<label for=\"username\" generated=\"true\" class=\"error\">该手机号码未注册</label>");
                $("#username").parent().append(str); //将动态创建的str元素追加到ul下面
            }else{
                $("#getSmCode1").attr("disabled", false);
            }
        }
    });
}
</script>
  <script type="text/javascript">
      $(function (){
          /*TimerButton是一个对象，该对象中有两个方法，一个是SecondCountDown，该方法的作用是精确倒计时。普通的使用setInterval倒计时会存在一定的偏差，特别是当我们切换窗口时，而SecondCountDown解决了这个误差问题（具体用法见timedown.html）。
          另一个方法是verify，该方法的作用是实现按钮倒计时的功能，有了这个按钮倒计时就可以实现获取验证码倒计时的功能*/
          console.log(timerButton);

          var btn = $("#getSmCode1");
          timerButton.verify_("#getSmCode1", {
              time: 60,//倒计时时间
              event: "click",//事件触发方式
              //执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
              condition: function () {
                  $("#username").parent().find("label").remove();
                  var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9{1}]))+\d{8})$/,
                      flag = phoneReg.test($("#username").val());
                  if(!flag){
                      //alert("电话号码填写不正确！");
                      //$("#username").parent().append('电话号码填写不正确');
                      var str = $("<label for=\"username\" generated=\"true\" class=\"error\">电话号码为空或者格式填写不正确</label>");
                      $("#username").parent().append(str); //将动态创建的str元素追加到ul下面
                      return false;
                  }

                  return true;
              },
              unableClass: "unabled",//按钮不能使用时的class
              runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
              timeUpText: "重新获取",//时间到了时按钮显示的文字
              progress: function (time) {//计时正在进行中时的回调
                  btn.html(time + " s后重新获取");
                  console.log(this);//这里的this指向按钮
                  console.log(this.timedown);//这个timedown就是计时器
              },
              timeUp: function (time) {//计时结束时执行的回调
                  btn.html("重新获取");
                  console.log("时间到了！");
                  console.log(this);//这里的this指向按钮
              },
              abort: function () {//中断计时
                  btn.html("重新获取");
                  console.log("我被中断了！");
                  console.log(this);//这里的this指向按钮
              },
              eventFn: function () {//事件执行后的回调
                  console.log(this);
                  console.log("执行了");
                  $.ajax({
                      url: "${base}/smCode_validate.jspx",
                      type: "POST",
                      dataType:"json",
                      data: {phone : $("#username").val(), smType: "2"},
                      success: function (data) {
                          $("#validateCode").val(data.smCode);
                      }
                  });
                  console.log(this);//这里的this指向按钮
              }
          });
      });
  </script>

</head>

<body style="background-color:#f7f7f7;">
[#include "../include/nav2.html"/]


<!--Breadcrumb Wrap End -->
<div class="gt_breadcrumb_bg default_width">
  <div class="container">
    <div class="gt_breadcrumb_wrap default_width">
      <ul>
        <li><a href="${base}">首页</a></li>
        <li><a href="${base}/member/forgot_password.jspx">找回密码</a></li>
      </ul>
    </div>
  </div>
</div>
<!--Breadcrumb Wrap End -->

<div class="gt_content_wrap">
  <section>
    <div class="container">
      <div class="gt_lgin_tab_wrap">
        <div class="tab-content">
          <div class="tab-pane active" id="register">
            <form id="jvForm" action="forgot_password.jspx" method="post">

              <div class="gt_login_des_wrap default_width" id="registerDiv">
                <div class="gt_login_field">
                  <input type="text" id="username" vld="{required:true,rangelength:[${site.usernameMinLen},12]}" onchange="validatePhone(this)" name="username" class="register-input" placeholder="请输入注册手机号" />
                  <span><i class="fa fa-phone"></i></span>
                </div>

                <div class="gt_login_field">
                  <input type="text" name="captcha" style="width: 50%;" class="required" placeholder="验证码">
                  <img id="guestbookCaptcha"  class="captcha-img" alt="" src="${base}/captcha.svl">
                  <span><i class="fa fa-hand-o-right"></i></span>
                </div>
                <div class="gt_login_field">
                  <input type="text" id="smCode" maxlength="8" style="width: 150px;" name="smCode" vld="{required:true}" placeholder="请输入短信验证码" class="register-input" />
                  <!--<button id="getSmCode1" class="sm_button" onclick="return false;">获取短信验证码</button>-->
                  <button id="getSmCode1" maxlength="8" class="sm_button" >获取短信验证码</button>
                  <input type="hidden" id="validateCode" name="validateCode"/>
                  <span><i class="fa fa-comment"></i></span>
                </div>
                <div style="width: 100%;margin: 10px 0px 10px 10px;">没有账号，<a class="tc" href="${base}/register.jspx">立即注册</a></div>
                <div class="gt_login_field">
                  <input type="hidden" name="token"  value="${token!}" />
                  <input type="submit" name="register" value="提 交" />
                </div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </section>
  <!--Login & Register Page Wrap End-->
</div>




<!--Bootstrap core JavaScript-->
<script src="/${res}/js/bootstrap.min.js"></script>
<style type="text/css">
  .gt_login_field .sm_button{
    width: 48%;
    height:45px;
    padding-top: 16px;
    font-size: 15px;
    margin-bottom: 15px;
  }
  .captcha-img{
    margin-left: 25px;
    vertical-align: top;
  }
  .gt_login_field input[type="password"] {
    width: 100%;
    height: 45px;
    border-radius: 50px;
    background-color: #4d4d4d;
    padding: 8px 10px 8px 60px;
    color: #f2f2f2;
    margin-bottom: 15px;
  }
  .gt_login_field .unabled{
    background-color: lightblue !important;
    color: #eee;
    cursor: default;
  }
  .error{display: inline;}
</style>
<style type="text/css">
  ._citys {width:100%; height:100%;display: inline-block; position: relative; }
  ._citys span { color: #56b4f8; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 1em; top: 10px; border: 1px solid #56b4f8; cursor: pointer; }
  ._citys0 { width: 100%; height: 34px; display: inline-block; border-bottom: 2px solid #56b4f8; padding: 0; margin: 0; }
  ._citys0 li { float:left; height:34px;line-height: 34px;overflow:hidden; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
  .citySel { background-color: #56b4f8; color: #fff !important; }
  ._citys1 { width: 100%;height:80%; display: inline-block; padding: 10px 0; overflow: auto;}
  ._citys1 a {  height: 35px; display: block; color: #666; padding-left: 6px; margin-top: 3px; line-height: 35px; cursor: pointer; font-size: 13px; overflow: hidden; }
  ._citys1 a:hover { color: #fff; background-color: #56b4f8; }
  .ui-content{
    border: 1px solid #EDEDED;
  }li{
     list-style-type: none;
   }
  #PoPy{
    width:90% !important;
    height:62% !important;
    margin-left: 20px;
    margin-right: 10px;
    background-color: white !important;
  }
</style>
[#include "../include/footer.html"/]
</body>
</html>
